<template>
  <div>
    <el-form ref="searchParams" :model="searchParams" :inline="true">
      <el-form-item :label="item.showName" v-for="(item, index) in formData.filterList" :key="index">
        <template v-if="item.formType=='Option'">
          <el-select v-model="searchParams[item.key]" placeholder="请选择" clearable>
            <el-option v-for="item in formOptions[item.key]" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
        <template v-else-if="item.formType == 'SingleSelectDialog'">
          <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;
          border: #ddd 1px solid;border-radius: 5px;height: 35px;line-height: 35px;padding: 0 10px;width: 162px;"
          @click="singleSelectAction(item)" @mouseleave='itemMouseleave()' @mouseenter='itemMouseenter()'>
            <div v-if="searchParams[item.relatedModel]" style="color: #555;">{{searchParams[item.relatedModel][item.relatedKey]}}</div>
            <div v-else style="color: #ccc;">请选择</div>
            <i v-if="singleSelectDialogMouseStatus" @click.stop="singleSelectClearAction(item)" class="el-icon-circle-close" style="cursor:pointer;color: #bbb;"></i>
            <i v-else class="el-icon-search" style="color: #bbb;"></i>
          </div>
        </template>
        <template v-else-if="item.formType=='Switch'">
          <el-select v-model="searchParams[item.key]" placeholder="请选择" clearable>
            <el-option v-for="item in formOptions[item.key]" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
        <template v-else-if="item.formType=='Custom'">
          <slot name="custom" :slotKey="item.key"></slot>
        </template>

        <template v-else>
          <el-input v-model="searchParams[item.key]" maxlength='100' placeholder="请输入" clearable style="width: 162px;" ></el-input>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSearch" type="primary" icon="el-icon-search" style="margin-left:40px" size="small">搜索</el-button>
        <!-- <el-button @click="resetQuery" type="primary" icon="el-icon-search" style="margin-left:40px">重置</el-button> -->
      </el-form-item>
    </el-form>
    <single-select-dialog ref="singleSelectDialog" @rowClick="rowClick"></single-select-dialog>
  </div>
</template>

<script>
  import singleSelectDialog from '@/views/interface/form/singleSelectDialog'
  export default {
    components: { singleSelectDialog },
    props: {
      formData: {
        type: Object,
        default: ()=>{}
      },
      formOptions: {
        type: Object,
        default: ()=>{}
      },
    },
    data() {
      return {
        searchParams: {},
        boolOptions: [{label: '是', value: 1}, {label: '否', value: 0}],
        singleSelectDialogMouseStatus: false
      }
    },
    created(){
    },
    methods: {
      handleSearch(){
        this.$emit('handleSearch', this.searchParams)
      },
      // 单选事件
      singleSelectAction(val){
        this.$refs.singleSelectDialog.item = val
        this.$refs.singleSelectDialog.show()
      },
      // 单选回显
      rowClick(item, val){
        console.log('单选回显', item, val)
        this.searchParams[item.key] = val.id
        this.$set(this.searchParams, item.relatedModel, val)
        // this.form[item.key] = val.id
        // this.$set(this.form, item.relatedModel, val)
      },
      itemMouseleave(){
        this.singleSelectDialogMouseStatus = false
      },
      itemMouseenter(){
        this.singleSelectDialogMouseStatus = true
      },
      singleSelectClearAction(item){
        console.log('item', item)
        this.searchParams[item.key] = ''
        this.$set(this.searchParams, item.relatedModel, null)
      }
    }
  }

</script>
